<template>
  <div class="canvas-container" ref="screenDom">
  </div>
</template>

<script setup>
import { onMounted,ref } from "vue";
import ThreePlus from "./three/index";
import * as THREE from "three";

let screenDom = ref(null);
const resizeFn = () => {
  let scale = window.innerWidth / 1920;
  screenDom.value.style.transform = `scale(${scale})`;
};
onMounted(() => {
  resizeFn();
  window.addEventListener("resize", resizeFn);
});

onMounted(() => {
  let threePlus = new ThreePlus(".canvas-container");
  window.threePlus = threePlus;
  threePlus.camera.position.set(-117, 17, -140);

  let bgPromise = threePlus.setBg("./assets/textures/023.hdr");
  threePlus.addOcean();

  // 创建视频纹理
  let video = document.createElement("video");
  video.src = "./textures/video/sucai01.mp4";
  video.autoplay = true;
  video.loop = true;
  video.muted = true;
  video.play();
  let videoTexture = new THREE.VideoTexture(video);

  threePlus.gltfLoader("./model/building-min02.glb").then((gltf) => {
    let vetroMaterial = null;
    gltf.scene.traverse((child) => {
      if (child.isMesh) {
        child.castShadow = true;
        child.receiveShadow = true;
        child.material.shadowSide = THREE.BackSide;
      }
      if (child.isMesh && child.name == "Plane") {
        child.visible = false;
      }
      if (
        child.isMesh &&
        child.material.name == "Vetro" &&
        vetroMaterial == null
      ) {
        vetroMaterial = child.material;
      }
    });
    bgPromise.then((texture) => {
      threePlus.addSphereSky(
        () => {
          vetroMaterial.emissive = new THREE.Color(0x000000);
          // threePlus.unrealBloomPass.enabled = false;
        },
        () => {
          console.log("夜晚");
          vetroMaterial.emissive = new THREE.Color(0x99cc99);
          vetroMaterial.emissiveMap = videoTexture;
          vetroMaterial.emissiveIntensity =1;
          // threePlus.unrealBloomPass.enabled = true;
        }
      );
    });

    threePlus.scene.add(gltf.scene);
  });

});
</script>

<style>
.canvas-container {
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
}
</style>
